<template>
  <div class="common-layout">
    <el-row>
      <el-col :span="6" />
      <el-col :span="12">
        <el-space size="large" direction="vertical" style="width: 100%;">
          <el-upload
            action="#"
            accept=".jpg,.jpeg,.png"
            :http-request="httpRequest"
            :on-success="onUploadSuccess"
            :on-remove="handleRemove"
            :on-error="onUploadError"
            :on-progress="onUploadProgress"
            style="margin-bottom: 30px"
          >
            <el-avatar :src="userInfo.avatar" style="width: 160px;height: 160px;" />
            <template #file>
              &nbsp;
            </template>
          </el-upload>
          <el-space direction="vertical" :size="50" alignment="left">

            <div>
              用户名：
              <el-input v-model="userInfo.username">
                <template #append>
                  <el-button @click="onUpdateUsername">修改</el-button>
                </template>
              </el-input>
            </div>

            <div>
              性别：
              <el-radio-group v-model="userInfo.sex" @change="onUpdate">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
                <el-radio label="unknown">不想填</el-radio>
              </el-radio-group>
            </div>

            <div>
              简介：
              <div style="width: 100%;">
                <el-input v-model="userInfo.detail">
                  <template #append>
                    <el-button @click="onUpdate">修改</el-button>
                  </template>
                </el-input>
              </div>
            </div>

          </el-space>
          <el-button style="float: right" @click="goBack">返回我的主页</el-button>
        </el-space>
      </el-col>
      <el-col :span="6" />
    </el-row>
  </div>

</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {reactive, ref} from "vue";
import {deleteObject, upload} from "@/utils/cos";
import {useUserStore} from "@/store/modules/user";
import {UploadProps} from "element-plus";
import {UploadProgressEvent} from "element-plus/es/components/upload/src/upload";
import {ElMessageBox} from "element-plus/es";

const router = useRouter()
const userStore = useUserStore()
const percentage = ref(0)
// 获取文件名，为删除对象存储文件，作准备
const fileKey = ref('')
// 放大图片弹窗是否显示
const userInfo = reactive(userStore.getUserInfo)
const httpRequest = upload
let preAvatar = userInfo.avatar


const onUpdate = () => {
  userStore.updateUser(userInfo)
}
const onUpdateUsername = () => {
  userStore.updateUsername(userInfo)
}

// 移除图片
const handleRemove: UploadProps['onRemove'] = () => {
  deleteObject(fileKey.value)
}

const onUploadProgress = (evt: UploadProgressEvent) => {
  percentage.value = evt.percent
}
//上传成功回调函数
const onUploadSuccess: UploadProps['onSuccess'] = (
  response
) => {
  userInfo.avatar = response
  userStore.updateUser(userInfo)

  //为删除图片作准备
  const key = preAvatar.toString().split("/")
  fileKey.value = key[3] + '/' + key[4]
  deleteObject(fileKey.value)
  preAvatar = response
}
//上传失败回调函数
const onUploadError = () => {
  ElMessageBox.alert('上传失败!', '错误提示', {
    confirmButtonText: '好的',
  })
}


const goBack = () => {
  router.push('/user/'+userStore.getUserInfo.id)
}
</script>

<style scoped>

</style>
